<%@page pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>数据融合平台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8" />
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/font.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/xadmin.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/echarts.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
    .first{
        width: 100%;
        height: 400px;
        background: #E0E0E0;
        border-radius: 20px 20px 0 0 ;
        margin-bottom: 20px;
        color: #E0E0E0;
    }
    .firstbt{
        width: 100%;
        height: 50px;
        background: #28495a;
        border-radius: 20px 20px 0 0 ;
        padding-top: 10px;
    }
    .firstbtright{
        width:60%;
        height: 40px;
        margin-left: 20%;
        text-align: center;
        line-height: 40px;
        font-size: 18px;
        float: left;   
        font-weight: bold;    
    }
    .xz{
        width: 100%;
        height: 760px;
        background: #E0E0E0;
         border-radius: 20px 20px 0 0 ;
    }
    .xz .bt{
        width: 100%;
        height: 50px;
        background: #9bcd38;
        border-radius: 20px 20px 0 0 ;
        padding-top: 10px;
        float: left;
    }
    .btleft{
        width:50%;
        height: 40px;
        /* margin-left: 20%; */
        text-align: center;
        line-height: 40px;
        font-size: 20px;
        float: left;
    }
    .btright{
        width:50%;
        height: 40px;
        margin-left: 0%;
        text-align: center;
        line-height: 40px;
        font-size: 20px;
        float: left;
    }
    .bt select{
        margin-top: -10px;
        height: 30px;
    }
    .first select{
        margin-top: -8px;
        height: 30px;
        font-weight: normal;
    }
    .two{
      width: 100%;
      float: left;
    }
    .three{
       width: 100%;
       float: left;
       margin-bottom: 50px;
    }
    .clubsweek{
        margin-top:60px;width: 40%;height:400px; background: red; float: left;
    }
    </style>
  </head>
  
  <body class="layui-anim layui-anim-up">
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">俱乐部</a>
        <a>
          <cite>俱乐部数据</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
      <div class="first">
        <div class="firstbt">
             <div class="firstbtright">
                <div class="layui-input-inline">
                  <select name="province" lay-filter="province" id="yearTermId">
                    <option value="">选择学年</option>
                    <c:forEach items="${yearList}" var="item">
                    	<option value="${item }">${item }</option>
                    </c:forEach>   
                  </select>
                </div>
              学年各俱乐部会员人数分布
            </div>
        </div>
        <div id="clubsnum" style="width: 100%;height:300px;margin-bottom:10px;"></div>          
      </div>

      <div class="xz">
          <div class="bt">
              <div class="btleft">
              俱乐部
                <div class="layui-input-inline">
                  <select style="width:140px" name="province" lay-filter="province" id="club">
                    <option value="">选择俱乐部</option>
                    <c:forEach items="${clubList}" var="club">
                    	<option value="${club }">${club }</option>
                    </c:forEach> 
                  </select>
                </div>
              </div>
              <div class="btright">
              学年
                <div class="layui-input-inline">
                  <select name="province" lay-filter="province" id="yearTerm">
                    <option value="">选择学年</option>
                    <c:forEach items="${yearList}" var="year">
                    	<option value="${year }">${year }</option>
                    </c:forEach> 
                  </select>
                </div>
              </div>
          </div>
          <div class="two">
            <div id="clubsweek" style="margin-top:20px;width: 100%;height:280px; float: left;"></div>  
          </div>
          <div class="three">
            <div id="clubsmonth" style="margin-top:60px;width: 60%;height:280px; float: left;"></div>
            <div id="clubsterm" style="margin-top:60px;width: 40%;height:280px; float: left;"></div>
          </div>
      </div>

    </div>
<script type="text/javascript" src="<%=request.getContextPath()%>/static/js/jquery.js"></script>
    <script>
             
        var clubsnum = echarts.init(document.getElementById('clubsnum'));
        var clubsweek = echarts.init(document.getElementById('clubsweek'));
        var clubsmonth = echarts.init(document.getElementById('clubsmonth'));
        var clubsterm = echarts.init(document.getElementById('clubsterm'));  

         // 显示标题，图例和空的坐标轴
   /*xxx学年各俱乐部会员人数分布图格式 */
   clubsnum.setOption({
	    color:['#28495a', '#9bcd38','#fbc80b','#ee5a14','#353537'],
        grid:{
            x:40,
            y:40,
            x2:70,
            borderWidth:1
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            x:70,
            y:5,
        },
        dataZoom: [
            {
                show: true,
                realtime: true,
                start: 0,
                end: 100,
            },
            {
                type: 'inside',
                realtime: true,
                start: 30,
                end: 70,
            }
        ],
        toolbox: {
            show : true,
            orient:'vertical',
            feature : {
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            },
            x:'right'
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                name:'俱乐部',
                nameTextStyle:{
                  color:' #DC143C',

                },
                data :[]
            }
        ],
        yAxis : [
            {
                type : 'value',
                name:'人数',
            }
        ],
        series : [
        ]
    });
	/*xxx学年俱乐部周活动人数图格式 */
	clubsweek.setOption({
	    title : {
	        text: '俱乐部周活动人数',
	         x:'center'
	    },
	    tooltip : {
	        trigger: 'axis'
	    },
	    color:['#28495a', '#9bcd38','#fbc80b','#ee5a14','#353537'],
	    grid:{
	        x:40,
	        y:40,
	        x2:70,
	        borderWidth:1
	    },
	    legend: {
	        x:70,
	        y:5,
	    },
	    dataZoom: [
	        {
	            show: true,
	            realtime: true,
	            start: 0,
	            end: 100,
	        },
	        {
	            type: 'inside',
	            realtime: true,
	            start: 30,
	            end: 70,
	        }
	    ],
	    calculable : true,
	    xAxis : [
	        {
	            type : 'category',
	            data : [],
	            name:'周',
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value',
	            name:'人数',
	        }
	    ],
	    series : []
	});



	/*xxx学年俱乐部月活动人数图格式 */
	clubsmonth.setOption({
	    title : {
	        text: '俱乐部月活动人数',
	         x:70
	    },
	    tooltip : {
	        trigger: 'axis'
	    },
	    color:['#28495a', '#9bcd38','#fbc80b','#ee5a14','#353537'],
	    grid:{
	        x:40,
	        y:40,
	        x2:70,
	        borderWidth:1
	    },
	    legend: {
	        x:'center',
	    },
	    dataZoom: [
	        {
	            show: true,
	            realtime: true,
	            start: 0,
	            end: 100,
	        },
	        {
	            type: 'inside',
	            realtime: true,
	            start: 30,
	            end: 70,
	        }
	    ],
	    calculable : true,
	    xAxis : [
	        {
	            type : 'category',
	            data : [],
	            name:'月份',
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value',
	            name:'人数',
	        }
	    ],
	    series : []
	});
	/* xxx学年俱乐部学期活动人数图格式*/
	clubsterm.setOption({
		    title : {
		        text: '俱乐部学期活动人数',
		         x:'center'
		    },
		    color:['#28495a', '#9bcd38','#fbc80b','#ee5a14','#353537'],
	        tooltip : {
	            trigger: 'axis'
	        },
	        legend: {
	        	 x:'right',
	        },
	        dataZoom: [
	            {
	                show: true,
	                realtime: true,
	                start: 0,
	                end: 100,
	            },
	            {
	                type: 'inside',
	                realtime: true,
	                start: 30,
	                end: 70,
	            }
	        ],
	        calculable : true,
	        xAxis : [
	            {
	                type : 'category',
	                data :[]
	            }
	        ],
	        yAxis : [
	            {
	                type : 'value',
	                name:'人数',
	            }
	        ],
	        series : [
	        ]
	    });    
    
    /* --------------------------数据操作开始-------------------------------------- */
    
    function clubstermData(year,clubName){
    	$.ajax({ 
            type: "get", 
            data :{"year":year,"clubName":clubName},
            dataType: "json", 
            url:"<%=request.getContextPath()%>/sports/clubYearNum",
            success: function(json) {
            	var arr=json["data"];
                var clubstermseries=[];
                var clubstermdataval=new Array();
                var clubstermdataname=new Array();
                for(var i = 0;i<arr.length;i++){
                	clubstermdataval[i]=new Array();
                   for(j=0;j<arr[i].items.length;j++){
                	   clubstermdataval[i][j]=arr[i].items[j].peopleNum;
                	   clubstermdataname[j]=arr[i].items[j].memberType;
                    }
                    /* console.log(clubsnumdataname); */
                    clubstermseries.push({
                        name: arr[i].term,
                        type: 'bar',
                        data: clubstermdataval[i]
                    });
                }
                /* console.log(clubsnumseries);   */
            	/*xxx学年各俱乐部会员人数分布图数据 */
            	clubsterm.setOption({
            	 xAxis : [
            	     {
            	         data : clubstermdataname
            	     }
            	 ],
            	 series :clubstermseries
            	});
            },
            error:function(data){
	            layer.alert('数据访问出错',{
	                icon:5});
            }
        });      	
    }
    clubstermData();//加载直接获取clubs数据
    $("#yearTerm").change(function(){//change事件加载直接获取clubs数据
    	yearTerm=$("#yearTerm").val();
    	clubstermData(yearTerm);
	});     
    
    
    function clubsnumData(year){
    	$.ajax({ 
            type: "get", 
            data :{"year":year},
            dataType: "json", 
            url:"<%=request.getContextPath()%>/sports/clubMemberNum",
            success: function(json) {
            	var arr=json["data"];
                var clubsnumseries=[];
                var clubsnumdataval=new Array();
                var clubsnumdataname=new Array();
                for(var i = 0;i<arr.length;i++){
                	clubsnumdataval[i]=new Array();
                   for(j=0;j<arr[i].items.length;j++){
                	   clubsnumdataval[i][j]=arr[i].items[j].value;
                      clubsnumdataname[j]=arr[i].items[j].clubName;
                    }
                    /* console.log(clubsnumdataname); */
                    clubsnumseries.push({
                        name: arr[i].name,
                        type: 'bar',
    					markPoint : {
    					    data : [
    					        {type : 'max', name: '最大值'},
    					        {type : 'min', name: '最小值'}
    					    ]
    					},
    					markLine : {
    					    data : [
    					        {type : 'average', name: '平均值'}
    					    ]
    					},
                        // data:[120, 132, 101, 134, 90, 230, 210]
                        data: clubsnumdataval[i]
                    });
                }
                /* console.log(clubsnumseries);   */
            	/*xxx学年各俱乐部会员人数分布图数据 */
            	clubsnum.setOption({
            	 xAxis : [
            	     {
            	         data : clubsnumdataname
            	     }
            	 ],
            	 series :clubsnumseries
            	});
            },
            error:function(data){
	            layer.alert('数据访问出错',{
	                icon:5});
            }
        });      	
    }
    clubsnumData(null);//加载直接获取clubs数据
    $("#yearTermId").change(function(){//change事件加载直接获取clubs数据
    	yearTermId=$("#yearTermId").val();
		clubsnumData(yearTermId);
	}); 
	/*xxx学年俱乐部周活动人数图数据*/
	function clubsweekData(year,clubName){
    	$.ajax({ 
            type: "get", 
            data :{"year":year,"clubName":clubName},
            dataType: "json", 
            url:"<%=request.getContextPath()%>/sports/getWeekOfYearClubPeopleNum",
            success: function(json) {
            	var arr=json['data'];
                var clubsweekseries=[];
                var clubsweekdataval=new Array();
                var clubsweekdataname=new Array();
                for(var i = 0;i<arr.length;i++){
                	clubsweekdataval[i]=new Array();
                   for(j=0;j<arr[i].items.length;j++){
                	   clubsweekdataval[i][j]=arr[i].items[j].value;
                	   clubsweekdataname[j]=arr[i].items[j].name;
                    }
                    /* console.log(clubsnumdataname); */
                    clubsweekseries.push({
                        name: arr[i].name,
                        type: 'bar',
    					markPoint : {
    					    data : [
    					        {type : 'max', name: '最大值'},
    					        {type : 'min', name: '最小值'}
    					    ]
    					},
    					markLine : {
    					    data : [
    					        {type : 'average', name: '平均值'}
    					    ]
    					},
                        data: clubsweekdataval[i]
                    });
                }
                /* console.log(clubsnumseries);   */
            	/*xxx学年各俱乐部会员人数分布图数据 */
            	clubsweek.setOption({
            	 xAxis : [
            	     {
            	         data : clubsweekdataname
            	     }
            	 ],
            	 series :clubsweekseries
            	});
            },
            error:function(json){
	            layer.alert('数据访问出错',{
	                icon:5});
            }
        });  		
	}
	clubsweekData();
	
    function clubsmonthData(year,clubName){
    	$.ajax({ 
            type: "get", 
            data :{"year":year,"clubName":clubName},
            dataType: "json", 
            url:"<%=request.getContextPath()%>/sports/getMonthCountByYear",
            success: function(json) {
            	var arr=json["data"];
                var clubsmonthseries=[];
                var clubsmonthdataval=new Array();
                var clubsmonthdataname=new Array();
                for(var i = 0;i<arr.length;i++){
                	clubsmonthdataval[i]=new Array();
                   for(j=0;j<arr[i].items.length;j++){
                	   clubsmonthdataval[i][j]=arr[i].items[j].value;
                	   clubsmonthdataname[j]=arr[i].items[j].monthTime;
                    }
                    /* console.log(clubsnumdataname); */
                    clubsmonthseries.push({
                        name: arr[i].name,
                        type: 'bar',
    					markPoint : {
    					    data : [
    					        {type : 'max', name: '最大值'},
    					        {type : 'min', name: '最小值'}
    					    ]
    					},
    					markLine : {
    					    data : [
    					        {type : 'average', name: '平均值'}
    					    ]
    					},
                        // data:[120, 132, 101, 134, 90, 230, 210]
                        data: clubsmonthdataval[i]
                    });
                }
                /* console.log(clubsnumseries);   */
            	/*xxx学年各俱乐部会员人数分布图数据 */
            	clubsmonth.setOption({
            	 xAxis : [
            	     {
            	         data : clubsmonthdataname
            	     }
            	 ],
            	 series :clubsmonthseries
            	});
            },
            error:function(data){
	            layer.alert('数据访问出错',{
	                icon:5});
            }
        });  	
    }
    clubsmonthData();//加载直接获取clubs数据
    $("#yearTerm").change(function(){//change事件加载直接获取clubs数据
    	yearTerm=$("#yearTerm").val();
    	club=$("#club").val();
    	clubsmonthData(yearTerm.substr(0, 4),club);
    	clubstermData(yearTerm,club);
    	clubsweekData(yearTerm.substr(0, 4),club);
	}); 
    $("#club").change(function(){//change事件加载直接获取clubs数据
    	club=$("#club").val();
    	yearTerm=$("#yearTerm").val();
    	clubsmonthData(yearTerm.substr(0, 4),club);
    	clubstermData(yearTerm,club);
    	clubsweekData(yearTerm.substr(0, 4),club);
	}); 
</script>
  </body>

</html>